import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { Tabs } from "antd";
import PartList from "./components/partList";
import PartAdd from "./components/partAdd";
import "./index.less";
import { useState } from "react";
import { useTranslation } from "react-i18next";
const index = (props: { register: Fn }) => {
	const { t } = useTranslation();
	const en_vi = "drugStorage.equipment.device";
	const [eqpId, setEqpId] = useState("");
	const [page, setPage] = useState("1");
	const setPageFn = (key: any) => {
		setPage(key);
	};
	const items = [
		{
			key: "1",
			label: t(`${en_vi}.part`),
			children: <PartList eqpId={eqpId} page={page}></PartList>
		},
		{
			key: "2",
			label: t(`${en_vi}.addPart`),
			children: <PartAdd eqpId={eqpId} setPageFn={setPageFn}></PartAdd>
		}
	];
	const [registerDrawer] = useDrawerInner(props.register, data => {
		setEqpId(data.record.eqpId);
	});
	const handleChange = (key: any) => {
		console.log(key);
		setPage(key);
	};

	return (
		<BasicDrawer title={t(`${en_vi}.part`)} showFooter={false} {...props} size="large" register={registerDrawer}>
			<div className="part">
				<Tabs defaultActiveKey="1" activeKey={page} items={items} onChange={handleChange} />
			</div>
		</BasicDrawer>
	);
};
export default index;
